<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入 layui 的样式 -->
    <link rel="stylesheet" href="../assets/lib/layui/css/layui.css" />
    <style>
        /* 设置盒子全局样式 */
        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 15px;
            background-color: #f2f3f5;
        }

        /* 封面容器的样式 */
        .cover-box {
            display: flex;
        }

        /* 左侧裁剪区域的样式 */
        .cover-left {
            width: 400px;
            height: 280px;
            overflow: hidden;
            margin-right: 20px;
        }

        /* 右侧盒子的样式 */
        .cover-right {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 预览区域的样式 */
        .img-preview {
            width: 200px;
            height: 140px;
            background-color: #ccc;
            margin-bottom: 20px;
            overflow: hidden;
        }
    </style>

</head>

<body>
    <!-- 卡片区域 -->
    <div class="layui-card">
        <div class="layui-card-header">
            <span>发布文章</span>
        </div>
        <div class="layui-card-body">
            <!-- 发布文章的表单 -->
            <!-- 发布文章的表单 -->
            <form class="layui-form" id="form-pub">
                <!-- 第一行 文章标题 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">文章标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                            autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <!-- 第二行 文章类别 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">文章类别</label>
                    <div class="layui-input-block">
                        <select name="cate_id" lay-verify="required"></select>
                    </div>
                </div>
                <!-- 第三行 文章内容 -->
                <div class="layui-form-item">
                    <!-- 左侧的 label -->
                    <label class="layui-form-label">文章内容</label>
                    <!-- 为富文本编辑器外部的容器设置高度 -->
                    <div class="layui-input-block" style="height: 400px;">
                        <!-- 重要：将来这个 textarea 会被初始化为富文本编辑器 -->
                        <textarea name="content"></textarea>
                    </div>
                </div>
                <!-- 第四行 图片裁剪 -->
                <div class="layui-form-item">
                    <!-- 左侧的 label -->
                    <label class="layui-form-label">文章封面</label>
                    <!-- 选择封面区域 -->
                    <div class="layui-input-block cover-box">
                        <!-- 左侧裁剪区域 -->
                        <div class="cover-left">
                            <img id="image" src="../assets/images/sample2.jpg" alt="" />
                        </div>
                        <!-- 右侧预览区域和选择封面区域 -->
                        <div class="cover-right">
                            <!-- 预览的区域 -->
                            <div class="img-preview"></div>
                            <!-- 选择封面按钮 -->
                            <button type="button" class="layui-btn layui-btn-danger" id="btnChooseImage">选择封面</button>
                            <!-- 隐藏的文件选择框 -->
                            <input type="file" id="coverFile" style="display: none;"
                                accept="image/png,image/jpeg,image/gif" />
                        </div>
                    </div>
                </div>

                <!-- 第五行 提交按钮 -->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit>发布</button>
                        <button class="layui-btn layui-btn-primary" lay-submit id="btnSave2">存为草稿</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
<script src="../assets/lib/layui/layui.all.js"></script>
<!-- 导入jquery -->
<script src="../assets/lib/jquery.js"></script>
<!-- 导入baseapi -->
<script src="../assets/js/mybaseAPI.js"></script>
<!--发哦如template -->
<script src="../assets/lib/template-web.js"></script>
<!-- 导入cropper.js -->
<script src="../assets/lib/cropper/Cropper.js"></script>
<script src="../assets/lib/cropper/jquery-cropper.js"></script>

<!-- 导入富文本 -->
<script src="../assets/lib/tinymce/tinymce.min.js"></script>
<script src="../assets/lib/tinymce/tinymce_setup.js"></script>
<!-- 定义模板结构 -->
<script type="text/html" id="tpl-cate">
    <option value="">请选择文章类别</option>
    {{each data}}
    <option value="{{$value.Id}}">{{$value.name}}</option>
    {{/each}}
</script>
<script>
    // 初始化富文本编辑器
    initEditor()
    let form = layui.form
    let layer = layui.layer

    // 1. 获取文章分类列表
    initCate()

    // 初始化文章分类的方法
    function initCate() {
        $.ajax({
            method: 'GET',
            url: '/my/article/cates',
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('获取分类数据失败！')
                }
                // 3.1 调用模板引擎渲染分类的可选项
                let htmlStr = template('tpl-cate', res)
                $('[name=cate_id]').html(htmlStr)
                // 3.2 通过 layui form方法 重新渲染表单区域的UI结构
                form.render()
            }
        })
    }

    // 1. 初始化图片裁剪器
    var $image = $('#image')

    // 2. 裁剪选项
    var options = {
        aspectRatio: 400 / 280,
        preview: '.img-preview'
    }

    // 3. 初始化裁剪区域
    $image.cropper(options)

    // 4. 为选择封面的按钮，绑定点击事件处理函数
    $('#btnChooseImage').on('click', function (event) {
        // 阻止默认事件
        event.preventDefault()
        $('#coverFile').click()
    })

    // 5. 为文件选择框绑定 change 事件
    $('#coverFile').on('change', function (e) {
        // 5.1 获取用户选择的文件
        let fileList = e.target.files
        // 代码安全性判断
        if (fileList.length === 0) {
            return layer.msg('请选择照片！')
        }

        // 5.2 拿到用户选择的文件
        let file = e.target.files[0]
        // 5.3 将文件，转化为路径
        let imgURL = URL.createObjectURL(file)
        // 5.4 重新初始化裁剪区域
        $image.cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', imgURL) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域
    })
    
    // 如果点击的是草稿，则切换状态
    let art_state = '已发布'
    $('#btnSave2').on('click',function(){
        art_state = '草稿'
    })
  

   // 7. 为表单绑定 submit 提交事件
    $('#form-pub').on('submit', function (e) {
        // 7.1 阻止表单的默认提交行为
        e.preventDefault()
        // 7.2 基于 form 表单，快速创建一个 FormData 对象
        //创建入参： 创建的时候就已经把title cate_id content 3个值放进去了
         let fd = new FormData()

        //var fd = new FormData($(this)[0])
        // 7.3 将文章的发布状态，存到 fd 中
        //fd.append('state', art_state)// append(属性名，属性值)
         fd.append('title',$('[name=title]').val())
        fd.append('cate_id',$('[name=cate_id]').val())
        fd.append('content',$('[name=content]').val()) 
        fd.append('state','已发布')
// 7.4 将封面裁剪过后的图片，输出为一个文件对象
        $image
            .cropper('getCroppedCanvas', {
                // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {//异步操作（一般后面不写其他业务代码）：因为bob图片的转化是异步操作，需要把请求提交的接口放到这个函数里面
                // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                // 7.5. 将文件对象，存储到 fd 中
                fd.append('cover_img', blob)
                // 7.6. 发起 ajax 数据请求调用提交接口
                publishArticle(fd)
            })

    })
/*     $('#form-pub').on('change', function (e) {
      // 1.1 获取图片上传按钮上的图片数组（！数组）
      let fileList = e.target.files
      // 1.2 如果过 fileList 数组的长度为0，阻止后续逻辑执行
      if (fileList.length <= 0) {
        return layer.msg('请选择图片')
      }
      // 1.3 有图片时 拿到fileList 数组第一个（索引为0 d的那张图片）
      let file = fileList[0]
      // （1）如果面试问道如何优化签订代码，提高代码执行效率， ： 如果有多个地方都用到同一个对象下的某一个属性时，可以在公共作用域中将这个属性提取成一个变量，在这些都需要使用的地方都去访问呢这个变量即可。
      // 1.4 图片文件转化为页面显示的路径
      let imgUrl = URL.createObjectURL(file)
      // 1.5 初始化剪裁区域
      // 3.4 重新初始化裁剪区域
      $image.cropper('destroy') // 销毁旧的裁剪区域
        .attr('src', imgUrl) // 重新设置图片路径
        .cropper(options) // 重新初始化裁剪区域

    }) */

    function publishArticle(fd) {
        $.ajax({
            method: 'POST',
            url: '/my/article/add',
            data: fd,
            // 注意：如果向服务器提交的是 FormData 格式的数据，
            // 必须添加以下两个配置项
            contentType: false,
            processData: false,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('发布文章失败！')
                }
                layer.msg('发布文章成功！')
                // 发布文章成功后，跳转到文章列表页面
                location.href = '../article/art_list.html'
            }
        })
    }
</script>


</html>